<template>
    <div>
        <div class="tabs_wrap">
            <el-tabs :value="activeKey" type="" @tab-click="tabClick($event)" @tab-remove='tabRemove'>
                <el-tab-pane v-for="(item) in editableTabs" :closable='editableTabs.length>1 && item.path!="/welcome"' :key="item.path" :label="item.title" :name="item.path">
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    //引入vuex
    import { mapState } from 'vuex'
    export default {
        name: 'Tabs',
        data() {
            return {
                closable: false,
                activeKey: null,
            }
        },
        computed: {
            // 使用
            // ...mapState(["tabsModule/RoutingPathData"]),
            // ...mapState("tabsModule", {
            //     editableTabs: (state) => state.RoutingPathData,
            // }),
            ...mapState({
                editableTabs: state => state.tabsModule.RoutingPathData,
            }),
        },
        mounted() {
            // 刷新页面，获取当前路由,给标签做默认选中
            let data = {
                path: this.$route.fullPath,
                keepAlive: this.$route.meta.keepAlive,
                title: this.$route.meta.title,
            }
            console.log(data)
            if (data.path == '/welcome') {
                console.log('首页')
                this.activeKey = '/welcome'
                return
            }
            this.$store.dispatch('tabsModule/addRoutingPathData', data)
            this.activeKey = this.$route.fullPath
        },
        watch: {
            // 监视路由，获取当前路由给选项卡赋当前选中值
            $route(key) {
                this.activeKey = key.fullPath
            },
        },
        created() {},
        methods: {
            welcome() {
                if (this.editableTabs.path == '/welcome') {
                    this.closable = false
                }
            },
            tabClick(event) {
                //写一个点击tabs跳转
                if (event.name !== this.activeKey) {
                    this.$router.push({ path: event.name })
                }
            },
            tabRemove(path) {
                // 关闭标签删除vuex内对应的路由
                console.log(path)
                if (path == '/welcome') {
                    return
                }
                const index = this.editableTabs.findIndex(
                    item => item.path === path
                )
                console.log(index)
                this.$store.dispatch('tabsModule/removeRoutingPathData', path)
                // 判断如果是关闭的当前页标签，路由跳转到当前页面的前一个标签对应的页面,并选中对应的标签
                if (path == this.activeKey) {
                    this.$router.push({
                        path: this.editableTabs[index - 1].path,
                    })
                    this.activeKey = this.editableTabs[index - 1].path
                }
            },
        },
    }
</script>
<style lang="scss">
    $height: 40px;
    .tabs_wrap {
        height: $height;
        background: var(--color-white);
        box-shadow: var(--header-light-shadow);
        padding-right: 40px;
        z-index: 99;
        box-sizing: border-box;
        position: relative;
        .el-tabs__header {
            margin: 0 !important;
        }
        //前面小圆点
        .el-tabs__item:before {
            content: '';
            width: 9px;
            height: 9px;
            margin-right: 8px;
            border-radius: 50%;
            display: inline-block;
            background: var(--border-color-base);
            transition: background-color 0.2s;
        }
        .el-tabs__item:before {
            display: none;
        }
        .el-tabs__item.is-active:before {
            display: inherit;
            font-size: 10px;
            background: var(--color-text-dark-primary);
            margin-right: 6px;
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
        }
        .el-tabs__item.is-active {
            background-color: var(--color-primary);
            color: var(--color-text-dark-primary);
            border-color: var(--color-primary);
            // color: var(--color-primary);
            // background: var(--color-primary-1);
        }

        .el-tabs__item:after {
            content: '';
            width: 0;
            height: 2px;
            background: var(--color-primary);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .el-tabs__item.is-active:after {
            width: 100%;
        }
        .el-tabs__item {
            height: 26px;
            line-height: 26px;
            transition: none;
            color: var(--color-text-secondary);
            border: 1px solid var(--border-color-lighter);
            margin-top: 7px;
            padding: 0 9px !important;
            font-size: 12px !important;
            margin-right: 6px;
        }
        .el-tabs__active-bar {
            display: none;
        }
        .el-tabs__content {
            display: none;
        }
        .el-tabs__nav-wrap {
            padding: 0 40px;
        }

        .el-tabs__nav-wrap:after,
        .el-tabs__nav-wrap:before {
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: var(--color-text-secondary);
            font-size: 16px;
            transition: background-color 0.2s, color 0.2s;
            box-sizing: border-box;
            text-align: center;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            // speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            font-family: element-icons !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: not-allowed;
        }
        .el-tabs__nav-wrap:after:hover,
        .el-tabs__nav-wrap:before:hover {
            color: var(--color-text-primary);
            background: var(--header-tool-hover-bg);
        }
        .el-tabs__nav-wrap:after {
            right: 0;
            left: auto;
            bottom: auto;
            height: auto;
            background: none;
            content: '';
        }
        //解决tabs中focus聚焦属性
        .el-tabs__item:focus.is-active.is-focus:not(:active) {
            box-shadow: none !important;
            border-radius: 3px;
        }
        .el-tabs__nav-next,
        .el-tabs__nav-prev {
            z-index: 999999;
            border-radius: 4px;
            height: 32px;
            line-height: 32px;
            background: none;
        }

        .el-tabs__nav-next,
        .el-tabs__nav-prev {
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: var(--color-text-secondary);
            font-size: 16px;
            transition: background-color 0.2s, color 0.2s;
            box-sizing: border-box;
            text-align: center;
        }
    }
</style>